<template>
    <el-dialog
        :title="'广告商务参数配置'"
        :visible="visible"
        width="550px"
        :destroy-on-close="true"
        :lock-scroll="false"
        @update:visible="updateVisible"
        :close-on-click-modal="false"
        @open="getAll"
    >
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            >
            <el-form-item label="广告平台:" prop="package_ad_platform_id">
                <el-select
                :placeholder="'请选择广告平台'"
                v-model="form.package_ad_platform_id"
                >
                    <el-option
                        v-for="item in listAll"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item
                v-for="item in formItemList"
                :key="item.id + item.name"
                :label="item.name + ':'"
                :prop="item.key"
            >
                <el-input
                    v-model="form[item.key]"
                    :placeholder="item.name"
                    :disabled="item.is_null === 2"
                    :type="item.type === 1 ? 'text' : 'textarea'"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="updateVisible(false)">取消</el-button>
            <el-button type="primary" @click="save" :loading="loading"
                >保存
            </el-button>
        </div>    
    </el-dialog>
</template>
<script>
// import { TimeSelect } from 'element-ui';

export default {
    props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object
    },
    data(){
        return{
            // 表单数据
            form: Object.assign({}),
            // 表单验证规则
            rules: {
                package_ad_platform_id: [
                    { required: true, message: "请选择广告平台", trigger: "blur" }
                ],
            },
            loading:false,
            listAll:[],
            // 提交状态
            formItemList: [],
            package_id:'',
            Rules: {},
            // 表单input的值
            nameValueArray: {}
        }
    },
    watch:{
        visible(){
            if (this.data && this.visible){
                this.packageId = this.data.id;
                // 获取要填写的表单值
                this.$http
                .get("/Package/getPackageConfig?package_id=" + this.packageId)
                .then(res => {
                    if (res.data.code === 0) {
                        if(res.data.data){
                            this.$set(this.form,'package_ad_platform_id',res.data.data.package_ad_platform_id)
                            let form={
                                package_ad_platform_id:res.data.data.package_ad_platform_id,
                                ...res.data.data.ad_config
                            }
                            this.form=form
                            this.changePackageId(res.data.data.package_ad_platform_id)
                        }
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
                .catch(e => {
                    this.$message.error(e.message);
                });
            }else{
                this.form = {}; 
            }
        },
        'form.package_ad_platform_id'(val){
            if (val) {
                this.changePackageId(val)
            }
        }
    },
    created(){
    },
    mounted(){

    },
    methods:{
        changePackageId(val){
            this.$http.post('/Packageadplatformtemplate/index',{package_ad_platform_id:val}).then(res=>{
                if(res.data.code === 0){
                    this.formItemList = res.data.data
                    this.formItemList.forEach((item) => {
                        if (item.is_null == 1) {
                            const rule = {
                                required: true, // 将必填项设置为 true
                                message: `请输入${item.name}`, // 自定义错误提示信息
                                trigger: "blur" // 触发校验的事件，这里使用失去焦点时触发
                            };
                            // 将校验规则添加到数组中
                            this.Rules[item.key] = [rule];
                        }
                    })
                    this.Rules.package_ad_platform_id=[
                    { required: true, message: "请选择广告平台", trigger: "blur" }
                ]
                    this.rules=this.Rules;
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
         /* 更新visible */
         updateVisible(value) {
            this.$emit("update:visible", value);
        },
        /* 获取广告平台列表 */
        getAll() {
            this.$http.post('/Packageadplatform/index').then((res) => {
                if (res.data.code === 0) {
                    this.listAll = res.data.data
                }else{
                    this.$message.error(res.data.msg)
                }
            })
        },
        //保存
        save(){
            this.$refs["form"].validate(valid=>{
                if(valid){
                    this.loading = true
                    this.$http
                        .post('/Package/setPackageAdConfig', 
                        {
                            package_id:this.data.id,
                            package_ad_platform_id:this.form.package_ad_platform_id,
                            ad_config:this.form
                        }
                        )
                        .then((res) => {
                            this.loading = false
                            if (res.data.code === 0) {
                                this.$message.success(res.data.msg)
                                this.form = {}
                                this.updateVisible(false)
                                this.$emit('done')
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                        .catch((e) => {
                            this.loading = false
                            this.$message.error(e.message)
                        })
                }else{
                    return false
                }
            })
        }
    }
}
</script>